<template>
  <div class="mod-demo-echarts">
    <div class="block">
      <span class="demonstration"></span>
      <el-cascader
        v-model="value"
        :options="options"
        @change="handleChange"
      ></el-cascader>
    </div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="positive" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="negative" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="beforeCompensate" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      options: [],
      value: [],
      dataForm: {
        measurePoint: 1,
        partId: 1,
        face: 0
      },
      xData: [],
      yDataPositive: [],
      yDataNegative: [],
      yDataOpData: [],
      yDataOpDataOld: [],
      chartLinePositive: null,
      chartLineNegative: null,
      chartLineBeforeCompensate: null
      // switchOptions: null,
      // measurePointOptions: [],
      // amplitudePositive: [],
      // amplitudeNegatice: []
    };
  },
  created() {
    this.initCascadeConfig();
    this.value = [
      this.dataForm.measurePoint,
      this.dataForm.partId,
      this.dataForm.face
    ];
  },
  mounted() {
    this.initOpData();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLineNegative) {
      this.chartLineNegative.resize();
    }
    if (this.chartLinePositive) {
      this.chartLinePositive.resize();
    }
  },
  methods: {
    initCascadeConfig() {
      this.$http({
        url: this.$http.adornUrl(
          "/generator/switchtofbgconfig/get/cascade/config"
        ),
        method: "get"
      }).then(({ data }) => {
        this.options = data.options;
        console.log(this.options);
      });
    },
    handleChange() {
      this.dataForm.measurePoint = this.value[0];
      this.dataForm.partId = this.value[1];
      this.dataForm.face = this.value[2];
      this.initOpData();
    },
    initOpData() {
      this.$http({
        url: this.$http.adornUrl("/generator/amplitude/get/new/amp"),
        method: "post",
        data: this.dataForm
      }).then(({ data }) => {
        this.xData = data.ampNewResVo.xdata;
        this.yDataPositive = data.ampNewResVo.ydataPositive;
        this.yDataNegative = data.ampNewResVo.ydataNegative;
        this.yDataOpData = data.ampNewResVo.opData;
        this.yDataOpDataOld = data.ampNewResVo.opDataOld;
        //console.log(this.yDataPositive);
        // //console.log(this.yDataPositive);
        //console.log(this.yDataNegative);
        this.initDataForPositive();
        this.initDataForNegative();
        this.initDataBeforeCompensate();
      });
    },
    initDataForPositive() {
      var option = {
        title: {
          text: "光谱曲线"
        },
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 10,
            end: 70,
            handleSize: 8,
            left: "100%"
          },
          {
            type: "inside",
            start: 10,
            end: 70
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            start: 0,
            end: 100,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "100%"
          }
        ],
        xAxis: {
          type: "category",
          data: this.xData,
          name: "波长(nm)",
          nameLocation: "middle",
          nameGap: 22
        },
        yAxis: {
          type: "value",
          name: "幅度",
          min: -10000,
          max: 60000
        },
        series: [
          {
            data: this.yDataPositive,
            type: "line"
          }
        ]
      };
      this.chartLinePositive = echarts.init(
        document.getElementById("positive")
      );
      this.chartLinePositive.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLinePositive.resize();
      });
    },

    initDataForNegative() {
      var option = {
        title: {
          text: "补偿后光谱"
        },
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 10,
            end: 70,
            handleSize: 8,
            left: "100%"
          },
          {
            type: "inside",
            start: 10,
            end: 70
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            start: 0,
            end: 100,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "100%"
          }
        ],
        xAxis: {
          type: "category",
          data: this.xData,
          name: "波长(nm)",
          nameLocation: "middle",
          nameGap: 22
        },
        yAxis: {
          type: "value",
          name: "幅度",
          min: -10000,
          max: 80000
        },
        series: [
          {
            data: this.yDataOpData,
            type: "line"
          }
        ]
      };
      this.chartLineNegative = echarts.init(
        document.getElementById("negative")
      );
      this.chartLineNegative.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLineNegative.resize();
      });
    },
    initDataBeforeCompensate() {
      var option = {
        title: {
          text: "补偿前光谱"
        },
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 10,
            end: 70,
            handleSize: 8,
            left: "100%"
          },
          {
            type: "inside",
            start: 10,
            end: 70
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            start: 0,
            end: 100,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "100%"
          }
        ],
        xAxis: {
          type: "category",
          data: this.xData,
          name: "波长(nm)",
          nameLocation: "middle",
          nameGap: 22
        },
        yAxis: {
          type: "value",
          name: "幅度",
          min: -10000,
          max: 80000
        },
        series: [
          {
            data: this.yDataOpDataOld,
            type: "line"
          }
        ]
      };
      this.chartLineBeforeCompensate = echarts.init(
        document.getElementById("beforeCompensate")
      );
      this.chartLineBeforeCompensate.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLineBeforeCompensate.resize();
      });
    }
  }
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }

  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    min-height: 400px;
  }
}
</style>
